<template>
  <div class="selectTab">
    <el-tabs v-model="activeTab" class="demo-tabs" @tab-change="handleClick">
      <el-tab-pane :name="tab.id" v-for="tab in tabList" :key="tab.id">
        <template #label>
          <div class="contentBox">
            <span class="nameClass">{{ tab.name }}</span>
            <span class="numClass" v-if="tab.num">{{ tab.num > 999 ? 999 : tab.num }}</span>
          </div>
        </template>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import {reactive, onMounted, ref} from 'vue'
const props = defineProps({
  tabList: {
    type: Array,
    default: () => ([])
  },
  defaultId: {
    type: Number,
    default: 0
  }
})
const activeTab = ref()
const emits = defineEmits(["changeTab"])
const handleClick = (e) => {
  emits("changeTab", activeTab.value)
}
const init = () => {
  if(props.tabList.length !== 0){
    activeTab.value = props.defaultId || props.tabList[0].id
    handleClick()
  }
}
init()
</script>

<style scoped lang="scss">
.contentBox {
  position: relative;
}
.nameClass {
  font-size: 14px;
}
.numClass {
  position: absolute;
  top: -5px;
  right: -22px;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  border-radius: 50%;
  font-size: 12px;
  color: white;
  background-color: red;
}
.selectTab {
  .demo-tabs {
    width: 100%;
    :deep(.el-tabs__nav-wrap) {
      padding-left: 30px;
      margin-top: 10px;
    }
    :deep(.el-tabs__header){
      margin: 0;
    }
    :deep(.el-tabs__nav-wrap){
      margin: 0;
    }
  }
}
</style>